<template>
  <div class="msg-set">
    <el-dialog
      :title="visible.type===0? '添加消息':visible.type===1?'修改消息':'查看消息'"
      :visible.sync="visible.show"
      width="600px"
      center
      :close-on-click-modal="false"
    >
      <div class="content" v-if="visible.type===2">
        <h3>{{visible.data.title}}</h3>
        <p class="txt" v-html="visible.data.content"></p>
      </div>
      <div class="content" v-else>
        <div class="line flex-left">
          <label class="title">类型</label>
          <el-radio v-model="param.type" label="1">滚动</el-radio>
          <el-radio v-model="param.type" label="2">弹窗</el-radio>
        </div>
        <div class="line flex-left" v-show="param.type==='2'">
          <label class="title">可关闭</label>
          <el-radio v-model="param.is_top" label="0">是</el-radio>
          <el-radio v-model="param.is_top" label="1">否</el-radio>
        </div>
        <div class="line flex-left">
          <label class="title">标题</label>
          <el-input v-model="param.title" size="medium" placeholder="请输入消息标题"></el-input>
        </div>
        <div class="line flex-left-top">
          <span class="title">内容</span>
          <el-input
            type="textarea"
            :rows="15"
            v-model="param.content"
            size="medium"
            placeholder="请输入消息内容"
          ></el-input>
        </div>
      </div>
      <div slot="footer" class="dialog-footer" v-if="visible.type===2">
        <el-button size="small" type="primary" @click="visible.show = false">关 闭</el-button>
      </div>
      <div slot="footer" class="dialog-footer" v-else>
        <el-button size="small" @click="visible.show = false">取 消</el-button>
        <el-button
          size="small"
          type="primary"
          @click="submit"
          :disabled="onSubmit"
          :loading="onSubmit"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addMsg, updateMsg } from "../../views/Message/message.service";
export default {
  props: ["visible", "id"],
  data() {
    return {
      param: {
        title: "",
        content: "",
        author: this.$store.state.userInfo.username,
        status: 1,
        type: "1",
        is_top: "0",
        platform_id: ""
      },
      onSubmit: false
    };
  },
  watch: {
    visible: {
      handler(item) {
        this.param.platform_id = this.id;
        if (item.type === 1 || item.type === 2) {
          this.param = JSON.parse(JSON.stringify(item.data));
        } else {
          this.param.type =
            item.data.type === "0" ? "1" : String(item.data.type);
        }
        if (item.show === false)
          this.param = {
            title: "",
            content: "",
            author: this.$store.state.userInfo.username,
            status: 1,
            type: "1",
            is_top: "0",
            platform_id: ""
          };
      },
      deep: true
    }
  },
  methods: {
    async submit() {
      if (this.param.title === "")
        this.$notify.error({
          title: "提示",
          message: "标题不能为空"
        });
      if (this.param.content === "")
        this.$notify.error({
          title: "提示",
          message: "内容不能为空"
        });
      const res =
        this.visible.type === 0
          ? await addMsg(this.param)
          : await updateMsg(this.param);
      if (res.code === 0) {
        this.$notify.success({
          title: "提示",
          message: this.visible.type === 0 ? "发布成功" : "修改成功"
        });
        this.$emit("success");
      }
      this.visible.show = false;
    }
  }
};
</script>

<style lang="scss">
.msg-set {
  .el-dialog__header {
    border-bottom: 1px solid #e9e9e9;
    padding: 15px;
    font-weight: 600;
  }
  .content {
    h3 {
      font-size: 16px;
      text-align: center;
      margin-bottom: 20px;
      font-weight: 600;
    }
    .txt {
      text-indent: 2em;
      // line-height: 18px;
    }
    .limit-text input {
      padding-right: 60px;
    }
    .line {
      // line-height: 50px;
      margin-top: 10px;
      .title {
        width: 4em;
        text-align: right;
        margin-right: 20px;
        flex-shrink: 0;
      }
    }
    .el-upload__tip {
      line-height: 20px;
      color: #d93a49;
    }
  }
}
</style>